<template>
  <el-drawer
    v-model="visible"
    title="智能过滤设置"
    direction="rtl"
    size="500px"
    @close="handleClose"
  >
    <div class="smart-filter-content">
      <el-alert
        title="设置过滤规则，系统将自动为您筛选符合条件的催款记录"
        type="info"
        show-icon
        style="margin-bottom: 20px;"
      />
      
      <div class="filter-rules">
        <div
          v-for="(rule, index) in filterRules"
          :key="rule.id"
          class="filter-rule-item"
        >
          <el-card shadow="never" class="rule-card">
            <div class="rule-header">
              <span>规则 {{ index + 1 }}</span>
              <el-button
                type="danger"
                link
                @click="removeRule(rule.id)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            
            <el-form :model="rule" label-width="80px" label-position="left">
              <el-form-item label="字段">
                <el-select v-model="rule.field" placeholder="请选择字段" style="width: 100%">
                  <el-option label="订单金额" value="orderAmount" />
                  <el-option label="催款方式" value="collectionMethod" />
                  <el-option label="催款结果" value="collectionResult" />
                  <el-option label="客户名称" value="customerName" />
                  <el-option label="催款日期" value="collectionDate" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="条件">
                <el-select v-model="rule.operator" placeholder="请选择条件" style="width: 100%">
                  <el-option label="等于" value="eq" />
                  <el-option label="不等于" value="ne" />
                  <el-option label="包含" value="contains" />
                  <el-option label="大于" value="gt" />
                  <el-option label="小于" value="lt" />
                  <el-option label="在范围内" value="between" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="值">
                <el-input
                  v-if="rule.field !== 'collectionMethod'"
                  v-model="rule.value"
                  placeholder="请输入值"
                />
                <el-select
                  v-else
                  v-model="rule.value"
                  placeholder="请选择催款方式"
                  style="width: 100%"
                >
                  <el-option label="电话催款" value="phone" />
                  <el-option label="邮件催款" value="email" />
                  <el-option label="上门催款" value="visit" />
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
      
      <el-button
        type="primary"
        link
        @click="addRule"
        style="margin-bottom: 20px;"
      >
        <el-icon><Plus /></el-icon>添加过滤规则
      </el-button>
    </div>
    
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="applyFilters">应用过滤</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'

interface FilterRule {
  id: string
  field: string
  operator: string
  value: string
}

interface Props {
  modelValue: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'rules-updated', rules: FilterRule[]): void
}>()

const visible = ref(false)
const filterRules = ref<FilterRule[]>([
  {
    id: '1',
    field: 'orderAmount',
    operator: 'gt',
    value: '10000'
  }
])

watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal
  }
)

watch(
  () => visible.value,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

const addRule = () => {
  const newRule: FilterRule = {
    id: Date.now().toString(),
    field: '',
    operator: '',
    value: ''
  }
  filterRules.value.push(newRule)
}

const removeRule = (id: string) => {
  filterRules.value = filterRules.value.filter(rule => rule.id !== id)
}

const applyFilters = () => {
  // 验证规则
  const validRules = filterRules.value.filter(rule => 
    rule.field && rule.operator && rule.value
  )
  
  if (validRules.length === 0) {
    ElMessage.warning('请至少设置一个有效的过滤规则')
    return
  }
  
  emit('rules-updated', validRules)
  handleClose()
  ElMessage.success('过滤规则已应用')
}

const handleClose = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
.smart-filter-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .filter-rules {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    
    .filter-rule-item {
      margin-bottom: 16px;
      
      .rule-card {
        .rule-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
        }
      }
    }
  }
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>